import React, { useEffect, useState } from 'react';
import { Divider, Descriptions } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { history } from 'umi'

const HandleRecord: React.FC<{title: string; detail: any; orderdetail: any}> = (props) => {
  const { title, detail, orderdetail } = props;
  const [dataSource1, setDataSource1] = useState<any>([])
  const [goodsList, setGoodsList] = useState<any>([])
  const [returnGoodsInfo] = useState<any>(detail?.return_goods_info ?? {})
  // const [hasExpressInfo, setHasExpressInfo] = useState<boolean>(false);

  useEffect(() => {
    if (detail) {
      const item = {
        apply_id: detail.apply_id,
        way: detail.way,
        apply_reason: detail.apply_reason,
        refund_fee: detail.refund_fee,
        refund_way: detail.refund_way,
        after_sales_status: detail.after_sales_status,
        apply_status: detail.apply_status
      }
      setDataSource1([item])
      setGoodsList(detail.apply_goods_info_list)

      if (returnGoodsInfo.express_company && returnGoodsInfo.express_id && returnGoodsInfo.mobile && returnGoodsInfo.receiver) {
        // setHasExpressInfo(true)
      }
    }
  }, [detail])

  const columns: ProColumns<any>[] = [
    {
      title: '申请单号',
      dataIndex: 'apply_id',
      width: 120,
    },
    {
      title: '售后方式',
      dataIndex: 'way',
      valueType: 'select',
      width: 120,
      valueEnum: {
        1: '退货',
        2: '退款'
      },
      render: (val, entity) => {
        const type = entity.way === '1' ? '退货退款' : '退款';
        console.log('orderdetail', orderdetail)
        const fh = orderdetail.order_status === 'P' ? '未发货' : orderdetail.order_status === 'S' ? '已发货' : '已收货';
        return `${type}（${fh}）`;
      }
    },
    {
      title: '申请售后原因',
      dataIndex: 'apply_reason',
    },
    {
      title: '退款金额',
      dataIndex: 'refund_fee',
      valueType: 'money',
      align: 'right',
      search: false
    },
    {
      title: '退回方式',
      dataIndex: 'return_way',
      search: false,
      render: (val, record) => {
        return '支付原路退回'
      }
    },
    {
      title: '受理状态',
      dataIndex: 'apply_status',
      search: false,
      valueType: 'select',
      width: 60,
      valueEnum: {
        U: '待处理', 
        H: '受理中', 
        S: '已完成', 
        F: '已拒绝',
        C: '已撤销'
      },
    },
    {
      title: '操作',
      align: 'center',
      dataIndex: 'option',
      render: (dom, entity) => {
        return <a onClick={() => {
          history.push({
            pathname: '/shop/after-sale/refund',
            query: {
              apply_id: entity.apply_id,
              order_id: detail.order_id,
            }
          })
        }}>查看详情</a>
      }
    }
  ];

  const columns2: ProColumns<any>[] = [
    {
      title: '品牌',
      dataIndex: 'brand_name'
    },
    {
      title: '名称',
      dataIndex: 'goods_name'
    },
    {
      title: '编号',
      dataIndex: 'goods_id'
    },
    {
      title: '规格',
      dataIndex: 'specs_desc'
    },
    {
      title: '退货数量',
      dataIndex: 'refund_num',
      align: 'right'
    },
    {
      title: '单价',
      dataIndex: 'selling_price',
      valueType: 'money',
      align: 'right'
    },
    {
      title: '小计',
      // dataIndex: 'shop_selling_price',
      hideInTable: detail.way === 2,
      valueType: 'money',
      align: 'right',
      render: (dom, entity) => {
        return Number(entity.refund_num * entity.selling_price).toFixed(2)
      }
    }
  ];

  console.log('detail.return_way', detail.return_way)

  return <div className="service-record order-record">
     <div className="header">
        <div className="title">{title}</div>
      </div>
      <Divider style={{margin: '10px 0 0'}} />

      <ProTable<any> 
        rowKey="apply_id" 
        dataSource={dataSource1} 
        options={false}
        search={false}
        pagination={false}
        className="handle-record-table"
        bordered columns={columns} />
      {
        detail.way === '1' &&
        <>
          <ProTable<any> 
            rowKey="record_id" 
            dataSource={goodsList} 
            options={false}
            search={false}
            pagination={false}
            style={{marginTop: 6}}
            className="handle-record-table"
            bordered 
            columns={columns2} />

          <div className='descriptions-wrap'>
            {
              detail.return_way !== '1' && <Descriptions
                size="middle" 
                className="handle-record-descriptions descriptions1"
                style={{marginTop: 10}} 
                column={6} 
                layout="vertical"
                bordered
              >
                <Descriptions.Item  label="退货方式">
                  {detail.return_way === '1' ? '快递寄回' : '送回指定地点'}
                </Descriptions.Item>
              </Descriptions>
            }

            { detail.return_way === '1' && <Descriptions
              size="middle" 
              className="handle-record-descriptions descriptions2"
              layout="vertical"
              style={{marginTop: 10}} 
              column={7} 
              bordered>
              <Descriptions.Item label="退货方式">{returnGoodsInfo.return_way === '1' ? '快递寄回' : '送回指定地点'}</Descriptions.Item>
              <Descriptions.Item label="收货人">{returnGoodsInfo.receiver || ' '}</Descriptions.Item>
              <Descriptions.Item label="手机号码">{returnGoodsInfo.mobile || ' '}</Descriptions.Item>
              <Descriptions.Item label="退货地址">{returnGoodsInfo.address || ' '}</Descriptions.Item>
              <Descriptions.Item label="快递公司">{returnGoodsInfo.express_company || ' '}</Descriptions.Item>
              <Descriptions.Item label="物流单号">{returnGoodsInfo.express_id || ' '}</Descriptions.Item>
              <Descriptions.Item label="状态">{returnGoodsInfo.status === 'U' ? '待寄回' : returnGoodsInfo.status === 'W' ? '待收货' : returnGoodsInfo.status === 'S' ? '已收货' : ''}</Descriptions.Item>
            </Descriptions> 
            }
          </div>
        </>
      }      
  </div>
}
export default HandleRecord;